<template>
  <div class="c-bg-white">
    <div :class="(showVipType == 1 || showVipType == 2 || showVipType == 5 || showVipType == 6) && !(vipType==3 || vipType>=5) ? (tabList && tabList.length > 1 ? 'hh230' : 'c-hh168') : (tabList && tabList.length > 1 ? 'c-hh310' : 'c-hh256')" class="c-text-hidden c-p">
      <div class="c-hh310 vip-top-bg c-ph24 c-text-hidden">
        <div v-if="(showVipType == 1 || showVipType == 2 || showVipType == 5 || showVipType == 6) && !(vipType==3 || vipType>=5)" class="c-flex-row c-aligni-stretch c-mt40 c-mb20">
          <img class="c-hh90 c-ww90 c-br50 c-flex-shrink0" :src="$addXossFilter(userHeadImg, require('../../../assets/defult_head.png'))" alt="">
          <div class="c-w0 c-flex-grow1 c-ml24 c-flex-column c-justify-sb c-pv4">
            <div class="c-fs26 c-fc-white c-fw700 c-text-ellipsis1">{{nickName ? (nickName.length > 10 ? (nickName.substring(0, 10) + '...') : nickName) : ''}}</div>
            <div class="c-fs22 c-fc-white c-fw400">{{showVipTimeStr}}</div>
          </div>
        </div>
        <div v-if="showVipType == 3 || showVipType == 7 || ((vipType==3 || vipType>=5) && typeBar == 1)" class="c-hh180 vip-bg-img c-pl24 c-mt40 c-pt28">
          <div class="c-flex-row">
            <img class="c-hh90 c-ww90 c-br50 c-flex-shrink0" :src="$addXossFilter(userHeadImg, require('../../../assets/defult_head.png'))" alt="">
            <div class="c-w0 c-flex-grow1 c-ml24 c-flex-column c-justify-sb">
              <div class="c-fs26 c-fc-white c-fw700 c-text-ellipsis1 fc-vip">{{nickName ? (nickName.length > 10 ? (nickName.substring(0, 10) + '...') : nickName) : ''}}</div>
              <div class="c-fs22 c-fc-white c-fw400 c-mt10 fc-vip">{{vipType==3 || vipType>=5 ? ('您已享受' + custServiceName + '权益') : showVipTimeStr}}</div>
              <div class="c-fs22 c-fc-white c-fw400 c-mt10 fc-vip" v-if="!(vipType==3 || vipType>=5)">您当前{{isVip ? '已' : '未'}}开通VIP会员</div>
            </div>
          </div>
        </div>
        <div v-if="showVipType == 4 || showVipType == 8 || ((vipType==3 || vipType>=5) && typeBar == 2)" class="c-hh180 svip-bg-img c-pl24 c-mt40 c-pt28">
          <div class="c-flex-row">
            <img class="c-hh90 c-ww90 c-br50 c-flex-shrink0" :src="$addXossFilter(userHeadImg, require('../../../assets/defult_head.png'))" alt="">
            <div class="c-w0 c-flex-grow1 c-ml24 c-flex-column c-justify-sb">
              <div class="c-fs26 c-fc-white c-fw700 c-text-ellipsis1 fc-svip">{{nickName ? (nickName.length > 10 ? (nickName.substring(0, 10) + '...') : nickName) : ''}}</div>
              <div class="c-fs22 c-fc-white c-fw400 c-mt10 fc-svip">{{vipType==3 || vipType>=5 ? '您已享受' + custServiceName + '权益' : showVipTimeStr}}</div>
              <div class="c-fs22 c-fc-white c-fw400 c-mt10 fc-svip" v-if="!(vipType==3 || vipType>=5)">您当前{{isSvip ? '已' : '未'}}开通SVIP会员</div>
            </div>
          </div>
        </div>
        <my-small-tabbar class="c-mt10" v-if="tabList && tabList.length > 1" :tabList="tabList" :tabIndex="typeBar" :tabNameClass="'c-fw500 c-fs26'" :fontSet="{defaultColor: 'c-fc-white c-opacity50'}" :tabActiveStyle="'background: #DCB66C;'" :tabNameActiveStyle="'color: #DCB66C'" :isScroll="true" @changeTab="changeType"></my-small-tabbar>
      </div>
    </div>
    <div v-if="!isiOS" :class="isNoTip && isNoThroughLinePrice ? 'c-hh230' : 'c-hh260'" class="c-w100 c-contexty-hidden c-contextX-scroll c-flex-row c-pl24 c-pt20 c-mt28">
      <div class="c-flex-shrink0 c-pr20" v-for="(item, index) in (getDataReady?(typeBar ==1 ? vipList : svipList):[])" :key="index" @click="chooseVIP(item, index)">
        <div :style="itemStyle(item)" :class="isNoTip ? isNoThroughLinePrice ? 'c-hh160' : 'c-hh180' : 'c-hh192'" class="c-ww180 c-br12 c-flex-column c-aligni-center c-p c-pt30">
          <div class="c-fs26 c-fc-sblack c-fw600 c-ph10 c-w100 c-text-ellipsis1 c-textAlign-c">{{item.name}}</div>
          <div :style="'color: #AA7525'" class="c-fs26 c-mt10 c-lh40">¥<span class="c-fw600"><span :class="getNumberStr(getShowPrice(item), 0) > 10000 ? 'c-fs30' : 'c-fs40'">{{getNumberStr(getShowPrice(item), 0)}}</span>{{getNumberStr(getShowPrice(item), 1)}}</span></div>
          <!-- 划线价格 -->
          <div v-if="throughLinePrice(item) >= 0" class="c-mt2 c-fc-gray c-fs20 c-text-decoration-through c-lh22">¥{{throughLinePrice(item)}}</div>
          <!-- 立省几元、每天约几元 -->
          <div v-if="isShowBottomTip(item)" class="c-pa c-p-b-2px c-p-l-2px c-ww180 c-hh34 c-flex-row c-flex-center c-fc-white c-fs20 c-br-bl12 c-br-br12" :style="'background-color: #dcb66c'">
            <!-- 活动价、新人价立省 -->
            <span v-if="curVipConf.isShowReduce == 1 && ((dataInfo.isNewUser && item.newUserPrice) || item.isOnSales) && item.price">立省¥{{getPriceDifference(item.price, getShowPrice(item))}}</span>
            <span v-else-if="curVipConf.isShowReduce == 1 && item.marketPrice && Number(item.marketPrice)">立省¥{{getPriceDifference(item.marketPrice, getShowPrice(item))}}</span>
            <!--每天-->
            <span v-else-if="item.duration > 0 && curVipConf.isShowDayPrice == 1">约{{'¥' | iosPriceFilter}}{{getDayPrice(item)}}</span>
          </div>
          <div v-if="getPriceType(item)" class="item-tip c-flex-row c-flex-center c-fs20"> {{getPriceTag(item)}}</div>
        </div>
      </div>
    </div>
    <div v-if="!isiOS" class="c-flex-row c-justify-sb c-pl24 c-pr24 c-pb34 c-fs24">
      <div class="c-flex-row c-aligni-center">
        <i class="iconfont c-fs30" :style="'color: #E0BE88;'">&#xe66c;</i>
        <span class="c-pl10 c-fc-sblack">优惠券</span>
      </div>
      <span class="c-fc-gray" v-if="isSetRenew==1 && (typeBar == 1 && isVipReNew || typeBar == 2 && isSvipReNew) || ((dataInfo.isNewUser && !pId) && newUserPrice) || (recommend != null && recommend.isExist && recType == 3 && recRelateId != '')">此套餐不支持使用优惠券</span>
      <span class="c-fc-gray" v-else-if="(typeBar == 1 && !enableVipCouponCount && !unableVipCouponCount) || (typeBar == 2 && !enableSvipCouponCount && !unableSvipCouponCount)">您的账户没有优惠券</span>
      <span class="c-fc-gray" v-else-if="(typeBar == 1 && !enableVipCouponCount) || (typeBar == 2 && !enableSvipCouponCount)">没有可用的优惠券</span>
      <span class="c-fc-gray" v-else>{{(typeBar == 1 ? enableVipCouponCount : enableSvipCouponCount)+'张优惠券可用'}}</span>
    </div>
    <div v-if="!isiOS" class="c-flex-row c-justify-sb c-pl24 c-pr24 c-pb34 c-fs24">
      <div class="c-flex-row c-aligni-center">
        <i class="iconfont c-fs30" :style="'color: #E0BE88;'">&#xe70a;</i>
        <span class="c-pl10 c-fc-sblack">{{customPointName}}抵扣</span>
      </div>
      <span class="c-fs24 c-fc-gray"
        v-if="isSetRenew==1 && (typeBar == 1 && isVipReNew || typeBar == 2 && isSvipReNew) || pId || !dataInfo.enablePoints || (dataInfo.isNewUser && newUserPrice) || (recommend != null && recommend.isExist && recType == 3 && recRelateId != '')">不支持{{customPointName}}抵扣</span>
      <span class="c-fs24 c-fc-gray" v-else>{{'可抵扣' + getDeductible + '元'}}</span>
    </div>
    <div class="c-flex-row c-aligni-center c-ph24 c-mb40">
      <div v-if="isOpenIosGzhPay && cfg.enableSales == 1" @click="clickVipBuy(1)" class="c-flex-column c-aligni-center c-pr24 c-justify-sb c-hh64">
        <div class="c-textAlign-c c-lh40"><span class="iconfont c-fc-sblack c-fs40">&#xe7b9;</span></div>
        <span class="c-fc-xblack c-fs16">赠送</span>
      </div>
      <div class="c-flex-row c-justify-sb c-w0 c-flex-grow1">
        <div class="c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center buy-btn c-w100" v-if="vipType==3 || vipType>=5">您已享受{{custServiceName}}特权</div>
        <div class="c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center c-fc-white c-bg-ccc c-w100" v-else-if="typeBar==1 && memberInfo.vipEndTime && memberInfo.vipEndTime.split(' ')[0]=='9999-12-31'">您已是长期会员</div>
        <div class="c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center c-fc-white c-bg-ccc c-w100" v-else-if="memberInfo.svipEndTime && memberInfo.svipEndTime.split(' ')[0]=='9999-12-31'">您已是长期会员</div>
        <template v-else>
          <div @click="clickExperience" v-if="(typeBar == 1 && vipConf && vipConf.enableExperience == 1 && vipConf.experienceDay > 0) || (typeBar == 2 && svipConf && svipConf.enableExperience == 1 && svipConf.experienceDay > 0)" class="c-w48 c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center probation-btn">免费体验{{typeBar == 1 ? vipConf.experienceDay : svipConf.experienceDay}}天</div>
          <div @click="clickVipBuy(0)" v-if="!isOpenIosGzhPay" :class="(typeBar == 1 && vipConf && vipConf.enableExperience == 1 && vipConf.experienceDay > 0) || (typeBar == 2 && svipConf && svipConf.enableExperience == 1 && svipConf.experienceDay > 0) ? 'c-w48' : 'c-w100'" class="c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center buy-btn">立即体验</div>
          <div @click="clickVipBuy(0)" v-else :class="(typeBar == 1 && vipConf && vipConf.enableExperience == 1 && vipConf.experienceDay > 0) || (typeBar == 2 && svipConf && svipConf.enableExperience == 1 && svipConf.experienceDay > 0) ? 'c-w48' : 'c-w100'" class="c-hh72 c-fs26 c-fw700 c-br40 c-flex-row c-flex-center buy-btn">{{$isWxAppIos() ? '咨询客服' : (vipType==1 ? '立即开通' : '立即升级/续费')}}</div>
        </template>
      </div>
    </div>
    <div class="c-w100 c-hh14 c-bg-sgray" v-if="equityTabList && equityTabList.length"></div>
    <div class="c-pl24 c-pt20" v-if="equityTabList && equityTabList.length">
      <my-small-tabbar :tabList="equityTabList" :flexClass="''" :isScroll="true" :tabNameClass="'c-fw600 c-fs28'" :fontSet="{defaultColor: 'c-fc-sblack'}"
        :tabActiveStyle="'background-color: #6a460f;'" :tabNameActiveStyle="'color:#6a460f'" :tabIndex="equityTabIndex"
        @changeTab="changeEquityTab"></my-small-tabbar>
    </div>
    <!-- 会员介绍 -->
    <div v-show="equityTabIndex == 0" class="c-ph24 c-pb40">
      <course-description ref="vipEquityDetail"></course-description>
    </div>
    <!-- 会员权益 -->
    <div v-if="equityTabIndex == 1" class="c-ph24 c-pb40">
      <div v-if="!isiOS" class="c-mt24">
        <div class="c-flex-row c-flex-shrink0 c-mt20" v-for="(item,index) in vipEquity" v-if="item.description && item.description.trim().length > 0" :key="index">
          <span class="c-fs24 c-fc-gray c-lh40">{{index+1+'、'+item.description}}</span>
        </div>
      </div>
      <div v-else class="c-mt24 c-fs24 c-fc-gray c-lh40">
        {{type == 1 ? '开通VIP，可免费学VIP免费课程，预计占平台总课程的50%':'开通SVIP，可免费学VIP免费和SVIP免费课程，预计占平台总课程的90%'}}
      </div>
    </div>
    <!-- 赠送礼包 -->
    <div v-if="equityTabIndex == 2 && !isiOS" class="c-ph24 c-pb40">
      <free-good-com :isFreeGood="isFreeGood" :vipList="typeBar == 2 ? svipList : vipList" :selectedIndex="selectedIndex" :getPoint="getPoint" :getCouponCount="getCouponCount" :themeColorObj="{ color5: '#eadbac', color6: 'rgba(72, 70, 70, 1)' }"></free-good-com>
    </div>
    <vip-hot-list v-if="curVipConf && curVipConf.isShowFreeProd == 1 && vipHotList && vipHotList.length" :type="typeBar == 1 ? 1 : 23" :vipConf="curVipConf" :vipHotList="vipHotList" :themeColor7="'#6a460f'" spaceClass="c-hh14"></vip-hot-list>
    <div class="c-w100 c-hh20 c-bg-sgray" v-if="curVipConf && curVipConf.instruction"></div>
    <div class="c-pv40 c-ph24" v-if="curVipConf && curVipConf.instruction">
      <div class="c-fs28 c-fw600 c-lh40 fc-vip">使用须知</div>
      <div class="c-mt10 c-fs24 c-fc-gray c-lh44" v-html="curVipConf.instruction"></div>
    </div>
    <div v-if="!isiOS && curVipConf && curVipConf.isShowMore == 1" class="c-hh14" style="background: #F7F7F7"></div>
    <div v-if="!isiOS && curVipConf && curVipConf.isShowMore == 1" class="c-ph24 c-mt40 c-pb20">
      <div class="c-fs28 c-fw-b c-fc-xblack">获取会员更多方式</div>
      <div class="c-mt36 c-w100 c-contexty-hidden c-contextX-scroll c-ws-n">
        <div v-if="isOpenIosGzhPay && hasVipGroupPurchase" class="c-inlineblack">
          <div @click="clickVipBuy(4)" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe6e5;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">团购</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">批量买更划算</div>
          </div>
        </div>
        <div v-if="isOpenIosGzhPay && cfg.enableSales == 1" class="c-inlineblack">
          <div @click="clickVipBuy(1)" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xec6d;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">好友买赠</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">买会员送好友</div>
          </div>
        </div>
        <div class="c-inlineblack">
          <div @click="goExchange()" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe996;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">兑换VIP</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">会员兑换入口</div>
          </div>
        </div>
        <div class="c-inlineblack" v-if="(vipType==1 || vipType==2 || vipType==4) && (dataInfo.isFriendHelper == true && companyAuth.enableFriendHelper == 1)">
          <div @click="goHelpDetail()" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe9a5;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">助力领取</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">好友集赞免费领</div>
          </div>
        </div>
        <div class="c-inlineblack" v-if="isSendVip&&companyAuth.enableRecommend == 1">
          <div @click="goRecommend()" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe68b;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">推荐有礼</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">推荐好友送会员</div>
          </div>
        </div>
        <div class="c-inlineblack" v-if="companyAuth.enablePoints == 1 && companyAuth.enablePointMallModule == 1">
          <div @click="goIntegrate()" class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe62b;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">{{customPointName}}商城</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">{{customPointName}}兑换会员</div>
          </div>
        </div>
        <div class="c-inlineblack">
          <div class="c-ww150 c-mr24 c-flex-column c-aligni-center">
            <div class="c-ww70 c-hh70 c-br36 iconfont c-flex-row c-flex-center c-fs32 c-fc-white c-mlr-auto bg-get-way">&#xe68d;</div>
            <div class="c-fs24 c-fw400 c-fc-xblack c-textAlign-c c-mt16">敬请期待</div>
            <div class="c-fs20 c-fw400 c-fc-gray c-textAlign-c c-mt12">新功能开发中</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 推荐有礼 -->
    <recommend-present ref="recommendPresent"></recommend-present>
    <recommend-award v-if="recommendArr[0] && recommendArr[0].recommend && recommendArr[0].recommend.isExist" :action="recommendArr[0].recommend && recommendArr[0].recommend.action"></recommend-award>
    <!-- 没有参加推荐有礼（不然按钮会被挡住），并且vip邀请卡开关打开 -->
    <div v-if="!(recommendArr[0] && recommendArr[0].recommend && recommendArr[0].recommend.isExist) && ((showVipShare == 1 && typeBar == 1) || (showSvipShare == 1 && typeBar == 2))" @click="inviteFriends" class="c-pf c-p-c-216 c-pz10 vip-share-btn c-pz101">
      <div class="c-fs16 c-fc-white c-textAlign-c c-pt40">分享会员</div>
    </div>
  </div>
</template>

<script>
import { reportPageViewByBtn } from "@/utils/userTraceLog.js";
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import recommendPresent from '@/components/templates/recommendPresent'
import RecommendAward from "@/components/member/recommend/recommendAward.vue";
import courseDescription from '@/components/templates/courseDescription';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import freeGoodCom from '@/components/templates/vip/freeGoodCom';
import vipHotList from '@/components/templates/vip/vipHotList';
let fromPath = "";
const originalEquityTabList = [{
  title: '会员介绍',
  index: 0,
}, {
  title: '会员权益',
  index: 1,
}, {
  title: '赠送礼包',
  index: 2,
}];
export default {
  name: "VipUp",
  components: {
    MySmallTabbar,
    recommendPresent,
    RecommendAward,
    courseDescription,
    freeGoodCom,
    vipHotList
  },
  beforeCreate() { },
  data() {
    return {
      customPointName: localStorage.getItem("customPointName"),
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      userHeadImg: localStorage.getItem("userHeadImg") ? localStorage.getItem("userHeadImg") : '',
      tabList: [{
        title: 'VIP套餐',
        index: 1,
      }],
      isSetRenew: 0,
      isVipReNew: 0, //是否属于VIP续费
      isSvipReNew: 0, //是否属于SVIP续费
      enableVipCouponCount: 0,
      unableVipCouponCount: 0,
      enableSvipCouponCount: 0,
      unableSvipCouponCount: 0,
      cfrom: global.ckFrom,
      typeBar: 1,
      cmpId: null, //当前选中的VIP种类ID
      getPoint: 0, //可获取的积分数
      getCouponCount: 0, //可获取的优惠券数
      deductiblePoints: 0, //积分可抵扣多少元
      dataInfo: '',
      memberInfo: "",
      presentPrice: 0, //赠送会员价值
      presentLast: 0, //赠送会员时间
      enableSvipModule: 0,
      vipType: 1,
      pId: null, //VIP限时购的extraId
      getDataReady: false,
      vipList: [],
      newUserPrice: null,
      svipList: [],
      vipEquity: [], // 会员权益
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
      nickName: localStorage.getItem("userName") ? localStorage.getItem("userName") : '',
      discountList: [], //被推荐人奖励优惠券
      equityList: [], //被推荐人奖励会员权益
      familyCardData: [], //被推荐人奖励亲情卡
      integral: 0, //被推荐人奖励积分
      checkText: '',
      isSendVip: 0,
      // isRecommendToBuy: false, //被推荐购买会员，隐藏可获取积分和优惠券
      coupons: [], // 优惠券列表
      isFreeGood: 0, // 是否赠送实物商品
      isOpenIosGzhPay: utilJs.isOpenIosGzhPay('1'),
      custServiceName: '服务商',
      cfg: JSON.parse(localStorage.getItem("cfg")),
      vipHotList: [],
      vipConf: null,
      svipConf: null,
      curVipConf: null, // 当前选中的vip或svip配置
      showVipType: 1,
      vipHasFormLog: false,
      vipIsRelForm: false,
      svipHasFormLog: false,
      svipIsRelForm: false,
      bindPhoneSetting: null,
      recommendArr: [],
      recType: 0,
      recRelateId: "", //推荐人ID
      recommend: null,
      hasVipGroupPurchase: false,
      equityTabIndex: 1,
      vipEquityDetail: [],
      svipEquityDetail: [],
      showVipShare: 1,
      showSvipShare: 1,
      equityTabList: [],
      selectedIndex: 0, // 选中的规格
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
    isSvip() {
      if ((this.memberInfo && this.memberInfo.svipEndTime && this.memberInfo.svipEndTime.split(' ')[0] == '9999-12-31') || (this.memberInfo && this.memberInfo.svipEndTime && this.memberInfo.svipIsOverDue == 0)) {
        return true;
      } else {
        return false;
      }
    },
    isVip() {
      if ((this.memberInfo && this.memberInfo.vipEndTime && this.memberInfo.vipEndTime.split(' ')[0] == '9999-12-31') || (this.memberInfo && this.memberInfo.vipEndTime && this.memberInfo.vipIsOverDue == 0)) {
        return true;
      } else {
        return false;
      }
    },
    showVipTimeStr() {
      let str = '';
      if (this.typeBar == 1 && this.memberInfo && !this.memberInfo.vipEndTime) {
        //vipEndTime 为空则未开通vip
        str = '您当前未开通VIP会员';
        this.showVipType = 1;
      } else if (this.typeBar == 2 && this.memberInfo && !this.memberInfo.svipEndTime) {
        str = '您当前未开通SVIP会员';
        this.showVipType = 2;
      } else if (this.typeBar == 1 && this.memberInfo && this.memberInfo.vipEndTime && this.memberInfo.vipEndTime.split('-')[0] >= '9900') {
        //vipEndTime 为9999-12-31 为永久有效 或者 超过9900年
        str = '长期有效';
        this.showVipType = 3;
      } else if (this.typeBar == 2 && this.memberInfo && this.memberInfo.svipEndTime && this.memberInfo.svipEndTime.split('-')[0] >= '9900') {
        str = '长期有效';
        this.showVipType = 4;
      } else if (this.typeBar == 1 && this.memberInfo && this.memberInfo.vipEndTime && this.memberInfo.vipIsOverDue == 1) {
        //vipIsOverDue 1 过期，0 是未过期
        str = '已过期';
        this.showVipType = 5;
      } else if (this.typeBar == 2 && this.memberInfo && this.memberInfo.svipEndTime && this.memberInfo.svipIsOverDue == 1) {
        str = '已过期';
        this.showVipType = 6;
      } else if (this.typeBar == 1 && this.memberInfo && this.memberInfo.vipEndTime && this.memberInfo.vipIsOverDue == 0) {
        str = `有效期至${this.memberInfo.vipEndTime}`;
        this.showVipType = 7;
      } else if (this.typeBar == 2 && this.memberInfo && this.memberInfo.svipEndTime && this.memberInfo.svipIsOverDue == 0) {
        str = `有效期至${this.memberInfo.svipEndTime}`;
        this.showVipType = 8;
      }
      return str;
    },
    getDeductible() { //计算积分抵扣
      if (!this.cmpId || !this.memberInfo.points || !this.dataInfo.enablePoints) {
        return 0;
      } else {
        let discount = Math.floor(100 * Number(this.memberInfo.points) / Number(this.dataInfo.rmb2Points)) / 100;
        return Math.min(discount, this.deductiblePoints) ? Math.min(discount, this.deductiblePoints) : 0;
      }
    },
    // 是否所有规格都没有下角标
    isNoTip() {
      let vipList = this.typeBar == 1 ? this.vipList : this.svipList;
      let isShow = false;
      if (vipList && vipList.length) {
        for (let i = 0; i < vipList.length; i++) {
          if (this.isShowBottomTip(vipList[i])) {
            isShow = true;
            break;
          }
        }
      }
      return !isShow
    },
    // 是否所有规格都没有划线价格
    isNoThroughLinePrice() {
      let vipList = this.typeBar == 1 ? this.vipList : this.svipList;
      let isShow = false;
      if (vipList && vipList.length) {
        for (let i = 0; i < vipList.length; i++) {
          if (this.throughLinePrice(vipList[i]) >= 0) {
            isShow = true;
            break;
          }
        }
      }
      return !isShow
    }
  },
  methods: {
    // 获取每日几元
    getDayPrice(item) {
      let days = Number(item.durationDays);
      return (Number(item.price || 0) / days).toFixed(2) + '/天';
    },
    // 获取时长
    getDurationUnit(item, type = 1) { // durationUnit, 1天，2月，3年
      let tmpStr = type == 1 ? '个' : ''
      let unit = item.durationType == 1 ? (tmpStr + '月') : (item.durationUnit == 1 ? '天' : item.durationUnit == 2 ? (tmpStr + '月') : '年')
      return unit
    },
    // 划线价格
    throughLinePrice(item) {
      let price = -1;
      if ((this.dataInfo.isNewUser && item.newUserPrice) || item.isOnSales) {
        price = item.price
      } else if (item.marketPrice && Number(item.marketPrice)) {
        price = item.marketPrice
      }
      return price
    },
    // 是否展示规格底部立省几元、每日几元的标签
    isShowBottomTip(item) {
      return (this.curVipConf && this.curVipConf.isShowReduce == 1 && ((this.dataInfo.isNewUser && item.newUserPrice) || item.isOnSales || (item.marketPrice && Number(item.marketPrice)))) || (item.duration > 0 && this.curVipConf && this.curVipConf.isShowDayPrice == 1)
    },
    getNumberStr(num, type = 0) { // type 0整数部分 1小数部分（包含小数点）
      if (!num || !(num + '')) {
        return
      }
      let numStr = (num + '').split('.')[type] || (type == 1 ? '00' : '')
      return (type ? '.' : '') + numStr
    },
    itemStyle(item) {
      let activeStyle = `background: #fff7e6;border: 2px solid #dcb66c;box-shadow: 0px 10px 20px 0px rgba(226, 176, 121, 0.2);`
      let commonStyle = `border: 2px solid #e8e8e8;`
      return this.cmpId == item.cmpId ? activeStyle : commonStyle
    },
    changeEquityTab(tIndex) {
      this.equityTabIndex = tIndex;
    },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = this.typeBar == 2 ? global.ckFrom.svip : global.ckFrom.vip;
      let extId = 0;
      // let cId = this.cmpId;
      let cmpId = this.typeBar == 1 ? this.vipList[this.selectedIndex].cmpId : this.svipList[this.selectedIndex].cmpId;
      let queryT = {extId: extId, ckFrom: ckFrom, cmpId: cmpId };
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadCustom', query: queryT });
    },
    goMoreHot() {
      let querys = {
        typeNum: this.typeBar == 1 ? 2 : 4
      }
      this.$routerGo(this, "push", { path: "/member/vip/vipRecommend", query: querys });
    },
    getPriceDifference(originalPrice, discountedPrice) {
      let diff = Number(originalPrice) - Number(discountedPrice)
      return diff > 0 ? diff.toFixed(2) : 0
    },
    // 计算几折
    getDiscountTag(price, oldPrice) {
      if (!oldPrice || !price) {
        return ''
      }
      let dis = (Number(price) / Number(oldPrice) * 10).toFixed(1) + '';
      if (dis && dis.split('.')[1] == 0) { // 小数点后为0，则取整数部分
        dis = dis.split('.')[0];
      }
      return dis + '折';
    },
    // 规格：当前显示的价格标签
    getPriceTag(item) {
      let tag = ''
      let priceType = this.getPriceType(item)
      let showPrice = this.getShowPrice(item)
      let salesTag = item.sales && item.sales.sales && item.sales.sales.tag && String(item.sales.sales.tag).length < 6 ? item.sales.sales.tag : (priceType == 1 && Number(showPrice) == 0 ? '限时免费' : '限时折扣')
      tag = priceType == 1 ? salesTag : priceType == 2 ? '新用户价' : priceType == 3 ? '续费' : ''
      tag = tag && priceType != 2 ? (tag + this.getDiscountTag(showPrice, item.price)) : tag
      return tag
    },
    // 规格：当前显示的价格类型
    getPriceType(item) {
      let renewPrice = item.isRenew == 1 && item.duration > 0 ? Number((item.renewRate * item.price / 100).toFixed(2)) : -1; // 续费价
      let priceType = 0; // priceType 0购买价 1活动价 2新人价 3续费价
      if (item.isOnSales) {
        priceType = 1;
      } else if (this.dataInfo.isNewUser && item.newUserPrice) {
        priceType = 2;
      } else {
        priceType = renewPrice > 0 && renewPrice < item.price ? 3 : 0;
      }
      return priceType
    },
    // 规格：应该展示的总价:活动价>新人价>续费价>购买价
    getShowPrice(item) {
      let renewPrice = item.isRenew == 1 && item.duration > 0 ? Number((item.renewRate * item.price / 100).toFixed(2)) : -1; // 续费价
      if (item.isOnSales) {
        return item.sales.price;
      } else if (this.dataInfo.isNewUser && item.newUserPrice) {
        return item.newUserPrice;
      } else if (this.recRelateId && this.recType == 3 && item.recommend && item.recommend.isExist && Number(item.recommend.action.beProfitRewardPrice) != 0) {
        return item.recommend.action.recommendPrice
      } else {
        return renewPrice > 0 && renewPrice < item.price ? renewPrice : item.price;
      }
    },
    // 前往助力领取
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return
      }
      this.$routerGo(this, "push", {
        path: "/homePage/task/task",
        query: { 'faId': this.dataInfo.friendInfo.faId, 'refereeId': localStorage.getItem("userId") }
      });
    },
    goRecommend() {
      this.$routerGo(this, "push", { path: "/member/recommend/recommendCenter" });
    },
    goIntegrate() {
      this.$routerGo(this, "push", { path: "/member/myIntegral/integralMall" });
    },
    // 前往兑换券
    goExchange() {
      this.$routerGo(this, "push", {
        path: "/member/myValueVoucher/myValueVoucher",
        query: { couponType: 3 }
      });
    },
    // 有关联表单，则跳到报名表单处
    goForm: function (ckFrom) { //vip relType14   svip relType15
      let pId = this.pId ? this.pId : -1;
      let relType = (ckFrom == this.cfrom.collageVip || ckFrom == this.cfrom.flashSalesVip || ckFrom == this.cfrom.vip || ckFrom == this.cfrom.flashSalesPresentVip) ? 14 : 15;
      let queryT = null;
      queryT = { cId: -1, extId: this.cmpId, ckFrom: ckFrom, isFromInvite: 0, isGoBack: 1, type: 1, relType: relType, pId: pId, goFPath: ''}
      this.$routerGo(this, "push", { path: '/homePage/form', query: queryT });
    },
    clickExperience() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile()) return;
      }
      if ((this.typeBar == 1 && this.vipIsRelForm && this.vipIsRelForm == true && this.vipHasFormLog == false && localStorage.getItem("showForm") == 1)
      || (this.typeBar == 2 && this.svipIsRelForm && this.svipIsRelForm == true && this.svipHasFormLog == false && localStorage.getItem("showForm") == 1)) {
        let prodType = null;
        if (this.pId) { //限时购
          prodType = this.typeBar == 1 ? this.cfrom.flashSalesVip : this.cfrom.flashSalesSvip;
        } else { //非限时购
          prodType = this.typeBar == 1 ? this.cfrom.vip : this.cfrom.svip;
        }
        this.goForm(prodType);
        return;
      }
      this.confirmExperience();
    },
    confirmExperience() {
      let $this = this;
      this.$cjConfirm({
        title: '确认', //
        titleCenter: true, //标题是否居中
        message: '每个用户只有一次领取体验机会，确定领取体验?',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '取消', //取消按钮文本
        confirmButtonText: '立刻体验', //确认按钮文本
        onConfirm() {
          $this.freeExperience()
        }
      })
    },
    //免费体验
    freeExperience() {
      utilJs.postMethod(global.apiurl + "Marketing/vip/experienceVip", {vipType: this.typeBar == 1 ? 2 : 4}, res => {
        this.$showCjToast({
          text: "升级成功",
          type: "success",
        }).then(() => {
          location.reload();
        });
      })
    },
    // 点击购买按钮
    clickVipBuy(isFrom) {
      if (localStorage.getItem('isWxAppIos')) {
        if (isFrom != 0) {
          this.$showCjToast({
            text: "不支持ios支付",
            type: 'warn'
          })
        } else {
          utilJs.miniProgramGoTo('push', "/pages/member/contact/index")
        }
        return
      }
      // if (this.enableIosRecharge != 1 && this.isiOS) {
      //   this.$showCjToast({
      //     text: "不支持在iOS系统内购买会员，请在公众号店铺内购买",
      //     type: 'warn'
      //   })
      //   return;
      // }
      if (!utilJs.isOpenIosGzhPay('23')) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (!this.cmpId) {
        return;
      }
      // 判断体验版是否到期，到期之后不可购买商品
      if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
      if (this.recType == 3 && this.recRelateId && this.recommend.isExist && (this.refereeId == localStorage.getItem("userId"))) {
        this.$showCjToast({
          text: "不能邀请自己支付",
          type: "warn",
        });
        return
      }
      if (this.typeBar == 2 && this.companyAuth && this.companyAuth.enableSvipModule != 1 && this.companyAuth.enableSvipSpec != 1) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind) {
        let goPath = this.goodsRoomId ? {goodsRoomId: this.goodsRoomId} : '';
        if (utilJs.goBindMobile({goPath})) return;
      }
      let type = null;
      // 根据是VIP或SVIP和是否赠送是否限时购判断type
      if (isFrom == 4) {
        type = this.typeBar == 1 ? this.cfrom.vip : this.cfrom.svip;
      } else if (isFrom) { //赠送
        let item = this.vipList[0];
        this.chooseVIP(item);
        if (this.pId) { //限时购
          type = this.typeBar == 1 ? this.cfrom.flashSalesPresentVip : this.cfrom.flashSalesPresentSvip;
        } else { //非限时购
          type = this.typeBar == 1 ? this.cfrom.presentVip : this.cfrom.presentSvip;
        }
      } else { //非赠送
        if (this.pId) { //限时购
          type = this.typeBar == 1 ? this.cfrom.flashSalesVip : this.cfrom.flashSalesSvip;
        } else { //非限时购
          type = this.typeBar == 1 ? this.cfrom.vip : this.cfrom.svip;
        }
      }
      if (this.isiOS) {
        //ios的游客身份
        this.$routerGo(this, "replace", { path: '/homePage/course/iosRecharge', query: { from: 1 } });
        return;
      }
      let goPathQuery = {
        prodId: this.cmpId,
        type: type,
        pId: this.pId || '',
        recRelateId: this.recommend && this.recommend.isExist && !isFrom ? this.recRelateId : '',
        recType: this.recommend && this.recommend.isExist && !isFrom ? this.recType : '',
      };
      if (this.recommend && this.recommend.isExist && !isFrom && this.refereeId != '') {
        goPathQuery.refereeId = this.refereeId;
      }
      if (isFrom == 1) {
        goPathQuery.isFrom = 1;
      }
      if (isFrom == 4) {
        goPathQuery.isFrom = 4;
      }
      if (this.goodsRoomId) {
        goPathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (this.$route.query.fromCoursePay) { //从课程支付页跳转到会员升级，会员升级完成后需要跳回课程详情
        goPathQuery.fromCoursePay = 1;
      }
      this.$routerGo(this, "push", { path: "/member/vip/vipBuy", query: goPathQuery });
    },
    //会员介绍
    getEquityDetail() {
      utilJs.getMethod(global.apiurl + "Marketing/vip/getEquityDetail?prodType=1", res => {
        this.vipEquityDetail = res;
        this.vipEquityDetail = res;
        if (this.typeBar == 1 && this.vipEquityDetail && this.vipEquityDetail.length && !(this.equityTabList[0] && this.equityTabList[0].index == 0)) {
          this.equityTabList = [...[originalEquityTabList[0]], ...this.equityTabList]
        }
        this.$nextTick(() => {
          if (this.typeBar == 1 && this.$refs.vipEquityDetail) {
            this.$refs.vipEquityDetail.getDescriptInfo(this.vipEquityDetail ? this.vipEquityDetail : []);
          }
          this.equityTabIndex = this.equityTabList[0] ? this.equityTabList[0].index : -1
        })
      })
      utilJs.getMethod(global.apiurl + "Marketing/vip/getEquityDetail?prodType=23", res => {
        this.svipEquityDetail = res;
        if (this.typeBar == 2 && this.svipEquityDetail && this.svipEquityDetail.length && !(this.equityTabList[0] && this.equityTabList[0].index == 0)) {
          this.equityTabList = [...[originalEquityTabList[0]], ...this.equityTabList]
        }
        this.$nextTick(() => {
          if (this.typeBar == 2 && this.$refs.vipEquityDetail) {
            console.log(this.$refs.vipEquityDetail, 'this.$refs.vipEquityDetail')
            this.$refs.vipEquityDetail.getDescriptInfo(this.svipEquityDetail ? this.svipEquityDetail : []);
          }
          this.equityTabIndex = this.equityTabList[0] ? this.equityTabList[0].index : -1;
        })
      })
    },
    getUseInstruction() {
      if (this.vipConf && this.vipConf.instruction) {
        utilJs.getPageHtml(this.vipConf.instruction, (res) => {
          this.vipConf.instruction = res
        })
      }
      if (this.svipConf && this.svipConf.instruction) {
        utilJs.getPageHtml(this.svipConf.instruction, (res) => {
          this.svipConf.instruction = res
        })
      }
    },
    getVipUpPageCouponList() {
      let getUrl = global.apiurl + `members/vipUpPageCouponList?type=${this.typeBar == 1 ? '1' : '23'}&cmpId=${this.cmpId}`
      utilJs.getMethod(getUrl, res => {
        if (this.typeBar == 1) {
          this.enableVipCouponCount = res.couponList.enable.length;
          this.unableVipCouponCount = res.couponList.unable.length;
        } else if (this.typeBar == 2) {
          this.enableSvipCouponCount = res.couponList.enable.length;
          this.unableSvipCouponCount = res.couponList.unable.length;
        }
      })
    },
    // 数据初始化
    getVIPInfo() {
      let $this = this;
      let promise = new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + "members/vipUpPage?type=1", function (res) {
          $this.dataInfo = res;
          $this.vipConf = res.conf;
          $this.memberInfo = res.userInfo;
          $this.vipType = res.userInfo.vipType;
          // $this.enableVipCouponCount = res.couponList.enable.length;
          // $this.unableVipCouponCount = res.couponList.unable.length;
          $this.vipList = res.vipList;
          $this.isSendVip = $this.isSendVip || res.isSendVip;
          $this.enableSvipModule = res.enableSvipModule;
          $this.enableSvipSpec = $this.companyAuth.enableSvipSpec;
          $this.vipHasFormLog = res.hasFormLog;
          $this.vipIsRelForm = res.isRelForm;
          $this.showVipShare = res.showVipShare;
          for (let i = 0; i < $this.vipList.length; i++) {
            if ($this.vipList[i].enterpriseGroup) {
              $this.hasVipGroupPurchase = true;
            }
          }
          // 既要模块开启，还要模块内存在svip规格
          if ($this.enableSvipModule && $this.companyAuth.enableSvipSpec) {
            $this.tabList = [{
              title: 'VIP套餐',
              index: 1,
            }, {
              title: 'SVIP套餐',
              index: 2,
            }];
            utilJs.getMethod(global.apiurl + "members/vipUpPage?type=2", function (res) {
              $this.dataInfo = res;
              $this.svipConf = res.conf;
              $this.memberInfo = res.userInfo;
              $this.vipType = res.userInfo.vipType;
              // $this.enableSvipCouponCount = res.couponList.enable.length;
              // $this.unableSvipCouponCount = res.couponList.unable.length;
              $this.svipList = res.vipList;
              $this.svipHasFormLog = res.hasFormLog;
              $this.svipIsRelForm = res.isRelForm;
              $this.showSvipShare = res.showVipShare;
              if (!$this.svipList || $this.svipList.length == 0) {
                $this.typeBar = 1;
              }
              $this.isSendVip = $this.isSendVip || res.isSendVip;
              for (let i = 0; i < $this.svipList.length; i++) {
                if ($this.svipList[i].sales && $this.svipList[i].sales.status && ($this.svipList[i].sales.limit == 0 || $this.svipList[i].sales.balance > 0) && $this.companyAuth.enableFlashSalesModule == 1) { //若是限时购，则把价格设置成限时购的价格
                  let nt = (new Date()).getTime();
                  let st = utilJs.getTimeByDate($this.svipList[i].sales.sales.startTime);
                  let et = utilJs.getTimeByDate($this.svipList[i].sales.sales.endTime);
                  if (nt >= st && nt < et && $this.svipList[i].sales.sales.status > -1) {
                    $this.svipList[i].sales.sales.status = 2;
                    $this.svipList[i].isOnSales = true; //可以使用限时购
                    //$this.vipList[i].price = $this.vipList[i].sales.price;
                  } else if (nt < st && $this.svipList[i].sales.sales.status == 1) {
                    $this.svipList[i].sales.sales.status = 1;
                    $this.svipList[i].isOnSales = false;
                  } else if (nt >= et && $this.svipList[i].sales.sales.status == 2) {
                    $this.svipList[i].sales.sales.status = -1;
                    $this.svipList[i].isOnSales = false;
                  } else {
                    $this.svipList[i].isOnSales = false;
                  }
                }
                if ($this.svipList[i].enterpriseGroup) {
                  $this.hasVipGroupPurchase = true;
                }
              }
              if ($this.svipList.length == 0) {
                $this.tabList = [{
                  title: 'VIP套餐',
                  index: 1,
                }];
                $this.typeBar = 1;
              }
              if ($this.typeBar == 2 && $this.svipList.length > 0) {
                let item = $this.svipList[0];
                $this.chooseVIP(item);
              } else {
                let item = $this.vipList[0];
                $this.chooseVIP(item);
              }
              $this.getUseInstruction();
              $this.curVipConf = $this.typeBar == 1 ? $this.vipConf : $this.svipConf;
              resolve();
            });
          } else {
            $this.tabList = [{
              title: 'VIP套餐',
              index: 1,
            }];
            $this.typeBar = 1;
            $this.getUseInstruction();
            $this.curVipConf = $this.typeBar == 1 ? $this.vipConf : $this.svipConf;
            resolve();
          }
          for (let i = 0; i < $this.vipList.length; i++) {
            if ($this.vipList[i].sales && $this.vipList[i].sales.status && ($this.vipList[i].sales.limit == 0 || $this.vipList[i].sales.balance > 0) && $this.companyAuth.enableFlashSalesModule == 1) { //若是限时购，则把价格设置成限时购的价格
              let nt = (new Date()).getTime();
              let st = utilJs.getTimeByDate($this.vipList[i].sales.sales.startTime);
              let et = utilJs.getTimeByDate($this.vipList[i].sales.sales.endTime);
              if (nt >= st && nt < et && $this.vipList[i].sales.sales.status > -1) {
                $this.vipList[i].sales.sales.status = 2;
                $this.vipList[i].isOnSales = true; //可以使用限时购
                //$this.vipList[i].price = $this.vipList[i].sales.price;
              } else if (nt < st && $this.vipList[i].sales.sales.status == 1) {
                $this.vipList[i].sales.sales.status = 1;
                $this.vipList[i].isOnSales = false;
              } else if (nt >= et && $this.vipList[i].sales.sales.status == 2) {
                $this.vipList[i].sales.sales.status = -1;
                $this.vipList[i].isOnSales = false;
              } else {
                $this.vipList[i].isOnSales = false;
              }
            }
          }
          if ($this.typeBar == 2) {
            let item = $this.svipList[0];
            $this.chooseVIP(item);
          } else {
            let item = $this.vipList[0];
            $this.chooseVIP(item);
          }
        });
      });
      promise.then(() => {
        if ((fromPath == "/homePage/form")
        && ((this.typeBar == 1 && this.vipIsRelForm && this.vipIsRelForm == true && this.vipHasFormLog == true && localStorage.getItem("showForm") == 1 && this.vipConf && this.vipConf.enableExperience == 1 && this.vipConf.experienceDay > 0)
          || (this.typeBar == 2 && this.svipIsRelForm && this.svipIsRelForm == true && this.svipHasFormLog == true && localStorage.getItem("showForm") == 1) && this.svipConf && this.svipConf.enableExperience == 1 && this.svipConf.experienceDay > 0)) {
          this.confirmExperience();
        }
        this.recommendBuyVip();
        this.getEquityDetail();
      })
    },
    //推荐有礼推荐购买会员，只展示推荐的会员套餐
    recommendBuyVip() {
      let cmpId = this.$route.query.prodId;
      let vipType = this.$route.query.vipType;
      let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
      if (recType != 3 || !cmpId || !vipType) {
        this.getDataReady = true;
        this.getVipHot();
        return;
      }
      this.typeBar = vipType;
      this.curVipConf = this.typeBar == 1 ? this.vipConf : this.svipConf;
      // this.isRecommendToBuy = true;
      this.tabList = vipType == 1 ? [{
        title: 'VIP套餐',
        index: 1,
      }] : [{
        title: 'SVIP套餐',
        index: 2,
      }];
      for (let item of (vipType == 1 ? this.vipList : this.svipList)) {
        if (item.cmpId == cmpId) {
          if (vipType == 1) {
            this.vipList = [item];
            this.svipList = [];
            this.chooseVIP(item);
            break;
          } else {
            this.svipList = [item];
            this.vipList = [];
            this.chooseVIP(item);
            break;
          }
        }
      }
      this.getDataReady = true;
      this.getVipHot();
    },
    //改变typeBar
    changeType(type) {
      if (this.typeBar != type) {
        this.typeBar = type;
        if (type == 1) {
          this.vipList.length > 0 ? this.chooseVIP(this.vipList[0]) : this.chooseVIP();
        } else {
          this.svipList.length > 0 ? this.chooseVIP(this.svipList[0]) : this.chooseVIP();
        }
        this.getVipHot();
        if (!(this.recRelateId && this.recType == 3)) {
          let newUrl = `${window.location.href.split("#")[0]}#/member/vip/vipUp?type=${type == 2 ? 23 : 1}`;
          history.replaceState("homework", "", newUrl);
        }
        this.curVipConf = this.typeBar == 1 ? this.vipConf : this.svipConf;
        this.selectedIndex = 0;
      }
      return false;
    },
    //得到小数点后两位
    showNumSecondPos(num) {
      return ('.' + (num * 1).toFixed(2).split('.')[1]);
    },
    //选择要购买的VIP种类
    chooseVIP(item = { cmpId: -1, coupons: [], isFreeGood: 0, points: 0, equityList: [], deductiblePoints: 0, isRenew: 0, newUserPrice: null }, index = 0) {
      this.selectedIndex = index;
      //选中规格的时候上报当前规格浏览事件
      reportPageViewByBtn({prodId: item.cmpId, prodType: this.typeBar == 1 ? 1 : 23});
      let { cmpId, coupons, isFreeGood, points, equityList, deductiblePoints, isRenew, newUserPrice } = item;
      this.cmpId = cmpId;
      this.getPoint = points;
      // this.getCouponCount = couponCount;
      this.getCouponCount = coupons.length;
      this.vipEquity = equityList;
      this.isVipReNew = isRenew;
      this.deductiblePoints = deductiblePoints;
      // this.isSetRenew = isSetRenew;
      this.isSetRenew = isRenew
      this.newUserPrice = newUserPrice;
      this.presentPrice = item.price;
      this.coupons = coupons;
      this.isSvipReNew = isRenew;
      this.isFreeGood = isFreeGood && ((item.giftRelates && item.giftRelates.length > 0) || item.freeGoodName) ? 1 : 0;
      this.recommend = item.recommend;
      if (this.typeBar == 1) {
        this.recommendArr = this.vipList.filter((item) => {
          return item.cmpId == this.cmpId && item.recommend.isExist == 1
        })
      } else {
        this.recommendArr = this.svipList.filter((item) => {
          return item.cmpId == this.cmpId && item.recommend.isExist == 1
        })
      }
      if (item.duration == -1) {
        this.presentLast = '永久' + (this.typeBar == 1 ? 'VIP' : 'SVIP');
      } else {
        this.presentLast = item.duration + this.getDurationUnit(item) + (this.typeBar == 1 ? 'VIP' : 'SVIP');
      }
      this.pId = item.isOnSales ? item.sales.pId : null;
      this.equityTabList = []
      if ((this.typeBar == 1 && this.vipEquityDetail && this.vipEquityDetail.length) || (this.typeBar == 2 && this.svipEquityDetail && this.svipEquityDetail.length)) {
        this.equityTabList.push(originalEquityTabList[0])
        this.$nextTick(() => {
          if (this.$refs.vipEquityDetail) {
            let detail = this.typeBar == 1 && this.vipEquityDetail ? this.vipEquityDetail : this.typeBar == 2 && this.svipEquityDetail ? this.svipEquityDetail : [];
            this.$refs.vipEquityDetail.getDescriptInfo(detail);
          }
        })
      }
      if (this.vipEquity && this.vipEquity.length) {
        this.equityTabList.push(originalEquityTabList[1])
      }
      if (this.isFreeGood || this.getPoint || this.getCouponCount) {
        this.equityTabList.push(originalEquityTabList[2])
      }
      this.equityTabIndex = this.equityTabList[0] ? this.equityTabList[0].index : -1;
      this.getVipUpPageCouponList();
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "升级会员", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("升级会员", "", shareUrl, "");
    },
    //作为分享页被推荐人进入
    isRecommendPage() {
      let recRelateId = this.recRelateId; //推荐人ID
      let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
      let bindPhone = this.$route.query.bindPhone; //完成推荐绑定手机号
      let data = { relateId: recRelateId };
      if (recRelateId) {
        if (recType == 1) {
          this.$nextTick(() => {
            this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
          })
        } else if (recType == 2) {
          if (bindPhone) {
            data.mobile = localStorage.getItem("uMobile");
            this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
          } else if (!localStorage.getItem("uMobile")) {
           utilJs.goBindMobile({
                recRelateId: recRelateId,
                recType: recType,
                goVipUp: 1
            });
          } else {
            this.$cjConfirm({
              title: '领取失败',
              message: '您已绑定过手机号，不在推荐范围，无法领取奖励',
              showCancelButton: false,
            })
          }
        }
      }
    },
    //点击立即体验会员
    experienceVip() {
      utilJs.getMethod(`${global.apiurl}Marketing/vip/experienceVip`, (res) => {
        this.vipHotList = res;
      });
    },
    //获取vip热门精选
    getVipHot() {
      this.vipHotList = [];
      utilJs.getMethod(`${global.apiurl}Marketing/vip/getFreeList?vipType=${this.typeBar == 1 ? 1 : 23}`, (res) => {
        this.vipHotList = res;
      });
    },
  },
  activated() {
    setDocumentTitle("升级会员"); // eslint-disable-line
    this.typeBar = Number(this.$route.query.type) == 23 ? 2 : 1;
    this.goodsRoomId = this.$route.query.goodsRoomId || '';
    this.recType = this.$route.query.recType || 0;
    this.recRelateId = this.$route.query.recRelateId || '';
    this.refereeId = this.$route.query.refereeId || '';
    this.dataInfo = '';
    this.getDataReady = false;
    this.vipList = [];
    this.svipList = [];
    this.vipEquity = [];
    this.getPoint = 0;
    this.getCouponCount = 0;
    this.memberId = localStorage.getItem("userId");
    this.discountList = [];
    this.equityList = [];
    this.familyCardData = [];
    this.integral = 0;
    this.checkText = '';
    this.isSendVip = 0;
    // this.isRecommendToBuy = false;
    this.coupons = [];
    this.recommendArr = [];
    this.isFreeGood = 0;
    this.hasVipGroupPurchase = false;
    this.equityTabIndex = 1;
    this.equityTabList = [];
    this.selectedIndex = 0;
    let customName = localStorage.getItem("customName") ? JSON.parse(localStorage.getItem("customName")) : null;
    this.custServiceName = customName ? customName.serviceProviderName : '服务商';
    getBindPhoneSetting(global.ckFrom.vip).then(res => {
      this.bindPhoneSetting = res;
    });
    this.isRecommendPage();
    this.getVIPInfo();
    this.wechatShare();
  },
  beforeRouteEnter(to, from, next) {
    fromPath = from.path;
    next();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.svip-bg1 {
  background: #dcb66c;
}
.vip-bg1 {
  background: #dcb66c;
}
.timeColor {
  color: #89593f;
}
.priceColor {
  color: #daac6a;
}
.vip-price-color {
  color: #AA7525;
}
.svip-price-color {
  color: #AA7525;
}
.vipChooseBG {
  background: #fff7e6;
  border: 2px solid #dcb66c;
  box-shadow: 0px 10px 20px 0px rgba(226,176,121,0.20);
}
.svipChooseBG {
  background: #fff7e6;
  border: 2px solid #dcb66c;
  box-shadow: 0px 10px 20px 0px rgba(226,176,121,0.20);
}
.vipNoChooseBG {
  border: 2px solid #e8e8e8;
}
.vip-activite-bg {
  color: #eadbac;
  background: linear-gradient(#252531 0%, #4e4e5c 0%, #23232f 100%);
  border-radius: 8px 2px 8px 2px;
  /* background: url("../../../../public/i/wap/vip/vip-active-tag.png");
  background-size: cover; */
}
.c-bg-top {
  background: linear-gradient(
    90deg,
    rgba(62, 64, 77, 1) 0%,
    rgba(60, 63, 74, 1) 100%
  );
  background-size: 100% 100%;
}
.c-bg-vipBg {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/vip/vipBg.png");
  background-size: cover;
}
.c-bg-vip_tag {
  background: url("../../../../public/i/wap/vip/vip-tag.png");
  background-size: cover;
}
.c-ww286 {
  width: 7.15rem;
}
.buyBtnBG {
  background: linear-gradient(
    -90deg,
    rgba(222, 186, 131, 1),
    rgba(247, 223, 176, 1)
  );
}
.c-bg-vip {
  background: url("../../../assets/i/wap/vip/vip.png") no-repeat left top;
  background-size: 100% 100%;
}
.family-card-bg {
  background: url("../../../assets/i/wap/vip/familyCard.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-vip-bg {
  background: url("../../../assets/i/wap/recommend/VIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-svip-bg {
  background: url("../../../assets/i/wap/recommend/SVIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.dia-head-bg {
  padding-top: 5rem;
}
.dialog-mid {
  background: url("../../../assets/i/wap/recommend/recommend-present-mid.png")
    no-repeat;
  background-size: 100% 100%;
  padding-right: 0.4rem;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-left1 {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.translate-lr {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.knowBtn {
  background: linear-gradient(
    -90deg,
    rgba(72, 147, 248, 1),
    rgba(72, 147, 248, 0.7)
  );
}
.goodsDetail >>> img {
  width: 100%;
}
.goodsDetail >>> p {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.goodsDetail >>> span {
  width: 100%;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  color: #666666;
  font-size: 0.6rem;
  line-height: 1.2rem;
  text-align: left;
}
.box-shadow {
  box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.5);
}
.hh230 {
  height: 5.75rem;
}
.vip-top-bg {
  background: url("../../../../public/i/wap/vip/vip-top-bg.png");
  background-size: cover;
}
.vip-bg-img {
  background: url("../../../../public/i/wap/vip/vip-bg-img.png");
  background-size: cover;
}
.svip-bg-img {
  background: url("../../../../public/i/wap/vip/svip-bg-img.png");
  background-size: cover;
}
.w516 {
  width: 51.6%;
}
.vip-bar-bg {
  background: url("../../../../public/i/wap/vip/vip-bar-bg.png");
  background-size: cover;
}
.svip-bar-bg {
  background: url("../../../../public/i/wap/vip/svip-bar-bg.png");
  background-size: cover;
}
.fc-vip {
  color: #6a460f;
}
.fc-svip {
  color: #663A2E;
}
.probation-btn {
  color: #6a460f;
  background: linear-gradient(-90deg,#f2be6d 0%, #f3e2ac 100%);
}
.buy-btn {
  color: #eadbac;
  background: linear-gradient(
    -90deg,
    rgba(35, 35, 47, 1),
    rgba(35, 35, 47, 0.6)
  );
}
.bg-get-way {
  background: linear-gradient(-30deg,#f2be6d 0%, #f3e2ac 100%);
}
.ww184 {
  width: 4.6rem;
}
.hh122 {
  height: 3.05rem;
}
.c-minh52 {
  min-height: 1.3rem;
}
.vip-share-btn {
  bottom: 3.15rem;
  width: 2.2rem;
  height: 1.68rem;
  background: url('../../../assets/i/wap/vip/vip-spread.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.tab-hd {
  p {
    padding: 0 0 0.5rem 0;
    position: relative;
    &::after {
      content: '';
      width: 0.8rem;
      height: 0.15rem;
      overflow: hidden;
      border-radius: 0.075rem;
      background: linear-gradient(-30deg, #f2be6d 0%, #f3e2ac 100%);
      position: absolute;
      left: 50%;
      bottom: 0;
      display: none;
      transform: translate(-50%, 0);
    }
    &.active {
      color: #333;
      // font-weight: 600;
      &::after {
        display: block;
      }
    }
  }
  // .vip-bar {
  //   &::after {
  //     background: linear-gradient(-30deg, #f2be6d 0%, #f3e2ac 100%);
  //   }
  // }
  // .svip-bar {
  //   &::after {
  //     background: linear-gradient(-30deg, #f2be6d 0%, #f3e2ac 100%);
  //   }
  // }
}
.c-p-l-2px {
  left: -2px;
}
.c-p-b-2px {
  bottom: -2px
}
.item-tip {
  /* width: 2.6rem; */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: 0.8rem;
  background-image: linear-gradient(90deg, #23232f 0%, #4e4e5c 100%);
  border-radius: 0.4rem 0.1rem 0.4rem 0.1rem;
  position: absolute;
  left: 0;
  top: -0.4rem;
  color: #eadbac;
}
</style>
